<script setup>
import config from '@/config'
import { useStore } from 'vuex'
const store = useStore()

const  url = config.vue2 + '/child/child-vue2-job'

function mounted() {
    const loading = document.querySelector("#appLoading")
    setTimeout(()=>{
      loading.style.display = "none"
    },200)
    console.log('在基座应用中监听子应用元素loading',loading) 
}
function unmount() {
    console.log('子应用卸载') 
}
function afterhidden() {  // deactivated
    console.log('子应用推入后台时触发') 
}
function beforeshow() { // activated
    console.log('子应用推入前台之前触发') 
    const loading = document.querySelector("#appLoading")
    setTimeout(()=>{
      loading.style.display = "none"
    },200)
localStorage.setItem('activeIndex','job')
    store.commit('setActiveIndex', 'job');
}
function aftershow() {
    console.log('子应用推入前台之后触发') 
    
}
function handleDataChange(e){
   let { activeIndex } = e.detail.data
   localStorage.setItem('activeIndex',activeIndex)
   store.commit('setActiveIndex', activeIndex);
   debugger
}
</script>

<template>
  <div>
   <div id="appLoading">拼命加载中......</div>
 <micro-app keep-alive 
  @mounted="mounted" 
  @unmount="unmount"
  @afterhidden="afterhidden"
  @beforeshow="beforeshow"
  @aftershow="aftershow"
  @datachange="handleDataChange"
  name="childJob" :url="url" baseroute="/main/childJob"></micro-app>
  </div>
</template>

<style>
</style>